<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineProperty响应式属性(动态属性)</title>
</head>
<body>
<script src="js/vue.js"></script>
<script>
    //Object.defineProperty 这个方法在对对象添加或者修改 属性为响应式属性
    let obj={
        firstName:'zhao',
        lastName:'liying'
    }
    Object.defineProperty(obj,'fullName',{
        get() {
            //当访问对象的fullName属性的时候返回
            return this.firstName+"-"+this.lastName;
        },
        set(val) {
            //当设置对象的fullName属性的时候返回
            let arr=val.split('-');
            this.firstName=arr[0];
            this.lastName=arr[1];
        }
    });
    console.log(obj.fullName);
    obj.fullName='liu-yifei';
    console.log(obj);
//模拟数据代理
    let vm={};
    let data={msg:"zhaoliying"};
    Object.defineProperty(vm,'msg',{
        get() {
            return data.msg;
        },
        set(val) {
            data.msg=val;
        }
    })
    console.log(vm.msg);
    vm.msg='heihei';
    console.log(vm.msg);
</script>
</body>
</html>